<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background: #eee;
			}
			/* #canvas{background: white;} */
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas');
			var ctx = canvas.getContext('2d');
			var x=0;
			var y=0;
			ctx.strokeRect(0,0,600,600)
			setInterval(function(){
				ctx.clearRect(0,0,canvas.width,canvas.height)
				ctx.strokeRect(0,0,600,600)
				x=x+1;
				y=y+1;
				ctx.fillStyle='red'
				ctx.fillRect(x,y,50,50)
				
			},30)
			
			
		</script>
	</body>
</html>
